<template>
  <div>
    <img class="img" v-if="imgUrl" :src="imgUrl" v-on="$listeners" v-bind="$attrs" @error="imageUrlOnError">
    <div v-else class="nodata pic__bg"></div>
  </div>
</template>

<script>
export default {
  name: "DproImgDom",
  props: ['src', 'onload'],
  data() {
    return {
      imgUrl: null
    }
  },
  async mounted() {
    this.imgUrl = this.src
    if (this.fromMsg) {
      if (!this.imgUrl) return
      await this.$nextTick()
      let img = new Image();
      img.src = this.imgUrl;
      let timer =setInterval(() => {
        if (img.complete){//判断图片是否加载完成
          clearInterval(timer);
          this.$emit('update:onload', true)
        }
      },100);
    }
  },
  methods:{
    imageUrlOnError(item, e){
      this.imgUrl = null
    },
  }
}
</script>
<style lang="less" scoped >
.img{
  width: 100%;
  height: 100%;
  // object-fit: contain;
  background-size: cover;
  box-sizing: border-box;
  z-index: 1;
}
.nodata{
  width: 100%;
  height: 100%;
  display: flex!important;
  justify-content: center;
  align-items: center;
  // line-height: 60px;
  color: var(--primary-text, #fff);
  background-color: rgba(50,57,67,.6);
  font-size: 12px;
  span{
    transform: translateY(-10px);
  }
}
</style>
